<template>
  <view class="order-coupon" v-if="isTake==false">
	
	<uni-popup ref="couponpopup" type="bottom"  :is-mask-click="false">
		<view class="coupon-content">
			<view class="coupon-header">
				<view class="content-item-left">
					<view >优惠卷</view>
					<view>
						<text>已选中推荐优惠，使用优惠券{{choiceNum}}张，共抵扣</text>
						<text>¥{{decrementPrice}}</text>
					</view>
				</view>
				
				<image src="/static/images/cancle.png" class="rightmore" mode="" @click="close()"></image>
			</view>
			<scroll-view scroll-y="true" style="height: 1000rpx;margin-top:16rpx;" >
				<view class="couponList" v-if="total>0">
					<view class="coupon-item" v-for="(item,index) in pageItems" :key="index">
						<view :class="[used ?'coupon-prev-used':'coupon-prev']">
							<view class="coupon-decrement-price">
								<text>¥</text>
								<text>{{item.decrement_price}}</text>
							</view>
							<view class="coupon-full-price">满{{item.full_price}}元...</view>
							
						</view>
						<view  :class="[used ?'coupon-next-used':'coupon-next']">
							<view class="detail-top"> 
								<view class="coupon_type" v-if="item.coupon_category=='common'">通用</view>
								<view class="coupon_type" v-else>盲箱</view>
								<view class="coupon_name">{{item.name}}</view>
							</view>
							<view class="detail-bottom">
								<view class="coupon_time">{{item.destory_at}}</view> 
								
								<view class="use" v-if ="item.checked==false || item.id != checkCouponId" @click="choice(item.id,true)"></view>
								<image src="/static/images/desc-icon-selected.png" class="use" mode="" v-else @click="choice(item.id,false)" ></image>
							</view>
						</view>
					</view>
					
				</view>	
			</scroll-view>
			<view class="coupon-bottom">
				<view class="coupon-confirm" @click="confirm()">确定</view>
			</view>	
			
		</view>
		
	 </uni-popup>
	 
	<view class="no-coupon" v-if="total==0">
		<text>优惠方案：暂无可用优惠券</text>
	</view>
	<view class="has-coupon" v-else @click="showCoupon()">
		<view class="content-item-left">
			<view>优惠方案：已选{{choiceNum}}张</view>
			<view>本单减¥{{decrementPrice}}</view>
		</view>
		
		<image src="/static/images/rightmore.png" class="rightmore" mode=""></image>
	</view>
  </view>
</template>

<script> 
	import store from "store"
	import {mapGetters,mapMutations} from 'vuex'
	import { getUserCouponsDefault,getUser } from "api/userApi"
	
	export default {
		name: "OrderCouponCom",
		store,
		props: {
		  user: {
		    type: Object,
		    required: true,
		    default: null
		  },
		 
			isTake:{
				default:false
			},
			orderSource:{
				default:'common'
			},
			totalAmount:{
				required: true,
				default: 0,
				
			}
		},
		computed:{
			...mapGetters([
				'statusBar',
			])
		},
		data(){
			return {
				'datetimerange':[],
				'money':0,
				'used':0,
				'total':0,
				'pageItems':[],
				'rightIndex':{},
				'decrementPrice':0,
				'userCouponId':0,
				'checkCouponId':0,
				'checkDecrementPrice':0,
				'choiceNum':0,
			}
		},
		
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			goPage(type) {
				
				if(type=="common"){
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}else{
					uni.reLaunch({
						url: '/pages/box/box'
					})
				}
			 
			},
			confirm(){
				
				if(this.checkCouponId==0){
					this.userCouponId = 0;
					this.decrementPrice = 0;
					 this.choiceNum = 0;
				}else{
					//this.decrementPrice = item.decrement_price;
					this.userCouponId = this.checkCouponId;
					this.decrementPrice = this.checkDecrementPrice;
					 this.choiceNum = 1;
				}
				
				this.$emit('choiceCoupon', { userCouponId: this.userCouponId, 'decrementPrice': this.decrementPrice})
				this.$refs.couponpopup.close('bottom')
				
			},
			async choice(id,type){
				console.log(type);
				console.log(id);
				this.pageItems.forEach((item, index) => {
					item.checked = false; 
					 if(id ==  item.id && type == true){
						 
						 item.checked = true;
						 this.checkCouponId = item.id;
						 this.checkDecrementPrice =  item.decrement_price;
						 
						/* this.decrementPrice = item.decrement_price;
						 this.userCouponId  = item.id;
						 
						 this.checkCouponId = item.id;
						 this.$emit('choiceCoupon', { userCouponId: this.userCouponId, 'decrementPrice': this.decrementPrice}) */
					}
					if(type == false){
						 this.checkCouponId = 0;
						 this.checkDecrementPrice = 0;
						 
					} 
				})
				this.$forceUpdate();
				
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async showCoupon() {
				if(this.checkCouponId != this.userCouponId){
					this.refreshCoupon(this.userCouponId);
				}
				this.$refs.couponpopup.open('bottom')
				
			},
			close(){
				this.$refs.couponpopup.close('bottom')
				
			},
			refreshCoupon(id){
				 this.pageItems.forEach((item, index) => {
				   item.checked = false;
					if(item.id ==  id){
						 item.checked = true;
						 this.decrementPrice = item.decrement_price;
						 this.userCouponId  = item.id;
						 this.checkCouponId = item.id;
						 this.$emit('choiceCoupon', { userCouponId: this.userCouponId, 'decrementPrice': this.decrementPrice})
					}
				})
				
			},
			async loadPageItems() {
				
			   let response =  await getUserCouponsDefault({page: this.pageNumber,source:this.orderSource,total:this.totalAmount});
			   
			   this.total = response.list.length;
			
			   let rightIndex= [];
			   let i= 0;
			   response.list.forEach((item, index) => {
				   item.full_price = parseInt(item.full_price);
				   item.decrement_price = parseInt(item.decrement_price);
					if(this.totalAmount >= item.full_price){
						rightIndex[i] = item;
						i++;
						
					}
			   })
			   rightIndex.sort(function(a, b){
					return  b.decrement_price -a.decrement_price 
			   })
			   if(rightIndex){
				   
				   this.rightIndex = rightIndex[0];
			   }
				
			   response.list.forEach((item, index) => {
				   item.checked = false;
					if(item.id ==  this.rightIndex.id){
						 item.checked = true;
						 this.decrementPrice = item.decrement_price;
						 this.userCouponId  = item.id;
						 this.checkCouponId = item.id;
						 this.choiceNum = 1;
						 this.$emit('choiceCoupon', { userCouponId: this.userCouponId, 'decrementPrice': this.decrementPrice})
					}
			   }) 
			   this.pageItems = response.list;
			   console.log(response.list);
			    
			 
			},	
			back(){
				uni.navigateBack()
				
			},
			
		
		},
		async created() {
			await this.loadPageItems();
		}
	}
</script>


<style lang="scss" scoped>
.order-coupon {
  .coupons {
    width: 100%;
    height: 100%;
    background-color: white;
  }
  .coupon-content{
	  height:1373rpx;
	  background:#f2f2f2;
  }
  .couponList{
	
	 
  }
 .coupon-item{
 	width:712rpx;
 	height:204rpx;
 	margin:16rpx auto 0rpx;
 	display:flex;
 	.coupon-prev{
 		width:248rpx;
 		height:204rpx;
 		background:url('/static/images/coupon-backgrouond.png') no-repeat;
 		background-size:248rpx 204rpx; 
 		
 		
 		.coupon-decrement-price{
 			margin:0 auto;
 			padding-top:24rpx;
 			color:#fff;
 			height:112rpx;
 			line-height:112rpx;
 			text-align: center;
 			>text:nth-child(1){
 				font-size:40rpx;
 			}
 			>text:nth-child(2){
 				font-size:80rpx;
 				
 			}
 		}
 		.coupon-full-price{
 			font-size:28rpx;
 			color:#fff;
 			text-align: center;
 		}
 	}
 	
 	.coupon-next{
 		width:470rpx;
 		background:#fff;
 		.detail-top{
 			width:418rpx;
 			margin-left:36rpx;
 			display:flex;
 			height:102rpx;
 			border-bottom:2rpx solid #f2f2f2;
 			.coupon_type{
 				margin-top:34rpx;
 				background:#F9EFEF;
 				color:#B33F33;
 				width:68rpx;
 				height:30rpx;
 				line-height:30rpx;
 				border-radius:40rpx;
 				font-size:22rpx;
 				text-align: center;
 			}
 			.coupon_name{
 				color:#333;
 				font-size:26rpx;
 				margin-left:6rpx;
 				margin-top:28rpx;
 				font-weight:600;
 			}
 		}
 		.detail-bottom{
 			display:flex;
 			margin-left:36rpx;
 			.coupon_time{
 				margin-top:38rpx;
 				font-size:22rpx;
 				color:#999;
 			}
 			.use{
 				
 				width:26rpx;
 				height:26rpx;
 				
 				border:2rpx solid #f2f2f2;
 				border-radius:26rpx;
 				
 				margin-top:38rpx;
 				margin-left:130rpx;
 			}
 		}
 	}
 	.coupon-next-used{
 		width:470rpx;
 		background:#fff;
 		.detail-top{
 			width:418rpx;
 			margin-left:36rpx;
 			display:flex;
 			height:102rpx;
 			border-bottom:2rpx solid #f2f2f2;
 			.coupon_type{
 				margin-top:34rpx;
 				background:#F2F2F2;
 				color:#999;
 				width:68rpx;
 				height:30rpx;
 				line-height:30rpx;
 				border-radius:40rpx;
 				font-size:22rpx;
 				text-align: center;
 			}
 			.coupon_name{
 				color:#999;
 				font-size:26rpx;
 				margin-left:6rpx;
 				margin-top:28rpx;
 				font-weight:600;
 			}
 		}
 		.detail-bottom{
 			display:flex;
 			margin-left:36rpx;
 			.coupon_time{
 				margin-top:38rpx;
 				font-size:22rpx;
 				color:#999;
 			}
 			.use{
 				
 				width:120rpx;
 				height:44rpx;
 				
 				border:2rpx solid #f2f2f2;
 				border-radius:58rpx;
 				color:#999;
 				font-size:22rpx;
 				text-align: center;
 				line-height:44rpx;
 				margin-top:28rpx;
 				margin-left:40rpx;
 			}
 		}
 	}
 }
 .no-more {
   width: 100%;
   font-size: 24rpx;
   text-align: center;
   color: #cccccc;
 	line-height: 80rpx;
 }
 .active{
 	color:#999999; 
 	
 }
 .no-coupon{
	 width:718rpx;
	 height:88rpx;
	 border-raidus:10rpx;
	 line-height:88rpx;
	 margin: 16rpx auto 0rpx;
	 font-size:24rpx;
	background:#fff;
	>text{
		padding-left:28rpx;	
	}
 }
 .has-coupon{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:718rpx;
	height:168rpx;
	background:#fff;
	border-radius: 10rpx;
	.rightmore {
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin-right:26rpx;
	}
	
	.content-item-left {
		margin-left:28rpx;
		font-size:24rpx;
		>view:nth-child(1){
			margin-top:28rpx;
			color:#333;
		}
		>view:nth-child(2){
			margin-top:42rpx;
			color:#D84C29;
		}
	}
	
 }
 .coupon-header{
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	
 	height:150rpx;
 	background:#fff;
 	border-radius: 10rpx;
 	
 	.rightmore {
 		display: block;
 		width: 32rpx;
 		height: 32rpx;
 		margin-right:26rpx;
 	}
 	
 	.content-item-left {
 		margin-left:24rpx;
 		font-size:24rpx;
 		>view:nth-child(1){
 			color:#333;
			font-size:32rpx;
			font-weight:600;
 		}
 		>view:nth-child(2){
 			margin-top:16rpx;
 			color:#D84C29;
 		}
 	}
 	
 }
 .coupon-bottom{
	 height:146rpx;
	 width:100%;
	 background:#fff;
	 position:fixed;
	 bottom:0;
	 .coupon-confirm{
		 margin:30rpx auto 0rpx;
		 width:518rpx;
		 height:72rpx;
		 color:#fff;
		 background:#D84C29;
		 font-size:28rpx;
		 text-align: center;
		 line-height:72rpx;
		 
	 }
 }
}
</style>
